<template>
  <div class="box_container">
    <a-form :label-col="{span: 2, offset: 0}"
            :wrapper-col="{span: 15}">
      <a-row>
        <a-col :span="8">
          <a-form-item
            label="申请人姓名"
            :label-col="{span: 6, offset: 0}"
            :wrapper-col="{span: 15, offset: 0}">
            <a-input
              disabled
              v-model="detailInfo.applyer"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            label="所属部门"
            :label-col="{span: 6, offset: 0}"
            :wrapper-col="{span: 15, offset: 0}">
            <a-input
              disabled
              v-model="detailInfo.departName"
            ></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-item
            label="填表日期"
            :label-col="{span: 6, offset: 0}"
            :wrapper-col="{span: 15, offset: 0}">
            <a-input
              disabled
              v-model="detailInfo.applyDate"
            ></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-item
            label="请假类型"
            :label-col="{span: 6, offset: 0}"
            :wrapper-col="{span: 15, offset: 0}">
            <a-input
              disabled
              v-model="filterLeaveType"
            ></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-item
            label="开始时间"
            :label-col="{span: 6, offset: 0}"
            :wrapper-col="{span: 15, offset: 0}">
            <a-input
              disabled
              v-model="detailInfo.leaveDetailForm.startTime"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            label="结束时间"
            :label-col="{span: 6, offset: 0}"
            :wrapper-col="{span: 15, offset: 0}">
            <a-input
              disabled
              v-model="detailInfo.leaveDetailForm.endTime"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            label="总计时长"
            :label-col="{span: 6, offset: 0}"
            :wrapper-col="{span: 15, offset: 0}">
            <a-input
              disabled
              v-model="detailInfo.leaveDetailForm.leaveDays"
            ></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-form-item label="请假事由">
        <a-textarea
          placeholder="请输入内容"
          maxlength="100"
          :rows="4"
          disabled
          v-model="detailInfo.leaveDetailForm.leaveReason"
        >
        </a-textarea>
      </a-form-item>
      <a-form-item label="说明附件">
        <template>
          <ul class="img_upload_wrapper" v-if="listImgAll[0]">
            <li v-for="(item, index) in listImgAll" :key="index">
              <img :src="imgMainUrl + item" alt="">
            </li>
          </ul>
          <div v-else style="margin-left: 10px">无</div>
        </template>
      </a-form-item>
      <a-form-item label="备注">
        <a-textarea
          placeholder="请输入内容"
          maxlength="100"
          :rows="4"
          disabled
          v-model="detailInfo.leaveDetailForm.leaveComment"
        >
        </a-textarea>
      </a-form-item>
      <a-form-item label="审批意见">
        <a-input
          type="textarea"
          placeholder="请输入审批意见, 最多100字"
          v-model="form.comment"
          :rows="4"
          :max-length="maxLength" />
      </a-form-item>

      <a-row>
        <a-col :span="8" v-show="showAssign">
          <a-form-item
            label="下一审批人"
            :label-col="{span: 6, offset: 0}"
            :wrapper-col="{span: 15, offset: 0}">
            <a-select
              v-model="form.assignees"
              placeholder="请选择"
              disabled="true"
              allowClear>
              <a-select-option v-for="(item, i) in assigneeList" :key="i" :value="item.username">{{item.realname}}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8" v-show="isGateway">
          <a-form-item
            label="下一审批人"
            :label-col="{span: 6, offset: 0}"
            :wrapper-col="{span: 15, offset: 0}">
            <span>分支网关处暂不支持自定义选择下一审批人，将发送给下一节点所有人</span>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row v-show="form.type==1">
        <a-col :span="8">
          <a-form-item
            label="否决至"
            :label-col="{span: 6, offset: 0}"
            :wrapper-col="{span: 15, offset: 0}">
            <a-select
              v-model="form.backTaskKey"
              @change="changeBackTask">
              <a-select-option v-for="(item, i) in backList" :key="i" :value="item.key">{{item.name}}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8" v-show="form.backTaskKey!=-1" >
          <a-form-item
            :label-col="{span: 6, offset: 0}"
            :wrapper-col="{span: 15, offset: 0}"
            label="指定原节点审批人" :error="error">
            <a-select
              v-model="form.assignees"
              placeholder="请选择"
              disabled="true"
              allowClear>
              <a-select-option v-for="(item, i) in assigneeList" :key="i" :value="item.username">{{item.realname}}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="6" :offset="9">
          <a-form-item class="form-item-bt-custom">
            <a-button @click="$emit('update:showChild', false)">返回</a-button>
            <a-button type="primary" v-if="approveType === 1" @click="approve(1)">同意</a-button>
            <a-button type="danger" v-if="approveType === 0" @click="approve(0)">否决</a-button>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script>
import { imgMainUrl } from '@/config/leave.config'
import {getAction} from "@/api/process";
export default {
  name: 'AddApproveListing',
  props: {
    detailInfo: {
      type: Object,
      default: () => {}
    },
    showChild: {
      type: Boolean,
      default: false
    },
    approveType: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      maxLength: 100,
      imgMainUrl,
      listImgAll: [],
      form: {
        id: "",
        procInstId: "",
        comment: "",
        type: 0,
        assignees: '',
        backTaskKey: "-1",
        sendMessage: true,
        sendSms: false,
        sendEmail: false
      },
      assigneeList: [],
      backList: [
        {
          key: "-1",
          name: "发起人"
        }
      ],
      showAssign: false,
      isGateway: false,
      error: '',
      url: {
        getNextNode: '/activiti_process/getNextNode',
        getBackList: '/actTask/getBackList/',
        getNode: '/activiti_process/getNode/'
      }
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo
    },
    leaveTypes () {
      return this.$store.getters.leaveTypes
    },
    depInfo () {
      return this.$store.getters.depInfo
    },
    filterLeaveType () {
      const leaveTypes = this.leaveTypes
      const leaveType = this.detailInfo.leaveDetailForm.leaveType
      let temp_desc = ''
      for (let i = 0; i < leaveTypes.length; i++) {
        if (leaveTypes[i]['item_val'] === leaveType) {
          temp_desc = leaveTypes[i]['item_desc']
          break
        }
      }
      return temp_desc
    },
  },
  created() {
    this.listImgAll = (this.detailInfo.leaveDetailForm.leaveEnclosure).split(',')
    console.log('approve-detial', this.detailInfo, this.listImgAll)
    if (this.approveType === 1) {
      this.passTask(this.detailInfo)
    } else {
      this.backTask(this.detailInfo)
    }
  },
  methods: {
    approve () {
      this.$emit('update:showChild', false)
      this.$emit('approve', this.form, this.showAssign)
    },
    passTask(v) {
      this.form.id = v.id;
      this.form.procInstId = v.procInstId;
      this.form.priority = v.priority;
      this.form.type = 0;
      getAction(this.url.getNextNode,{procDefId:v.procDefId, currActId:v.key, loginUserId: this.userInfo.id}).then(res => {
        this.userLoading = false;
        if (res.success) {
          if (res.result.type == 3 || res.result.type == 4) {
            this.isGateway = true;
            this.showAssign = false;
            this.error = "";
            return;
          }
          this.isGateway = false;
          if (res.result.users && res.result.users.length > 0) {
            this.error = "";
            let list = res.result.users;
            if (res.result.title == '部门经理审批') {
              for (let i = 0; i < list.length; i++) {
                let depId = this.depInfo.superiorDepId == '0' ? this.depInfo.id : this.depInfo.superiorDepId
                console.log('depId', depId)
                console.log('depId-', list[i]['departIds'])
                if (depId == list[i]['departIds']) {
                  this.assigneeList.push(list[i])
                }
              }
            } else {
              this.assigneeList = list
            }

            // 默认勾选
            // let ids = [];
            // res.result.users.forEach(e => {
            //   ids.push(e.username);
            // });
            this.form.assignees = this.assigneeList[0]['username']
            this.showAssign = true;
          } else {
            this.form.assignees = ''
            this.showAssign = false;
          }
        }
      });
    },
    backTask(v) {
      this.form.id = v.id;
      this.form.procInstId = v.procInstId;
      this.form.procDefId = v.procDefId;
      this.form.priority = v.priority;
      this.form.type = 1;
      this.showAssign = false;
      // 获取可驳回节点
      this.backList = [
        {
          key: "-1",
          name: "发起人"
        }
      ];
      this.form.backTaskKey = "-1";
      this.backLoading = true;
      getAction(this.url.getBackList+v.procInstId, { loginUserId: this.userInfo.id }).then(res => {
        this.backLoading = false;
        if (res.success) {
          res.result.forEach(e => {
            this.backList.push(e);
          });
        }
      });
    },
    changeBackTask(v) {
      if (v == "-1") {
        return;
      }
      this.userLoading = true;
      getAction(this.url.getNode+v, { loginUserId: this.userInfo.id }).then(res => {
        this.userLoading = false;
        if (res['success']) {
          if (res.result.users && res.result.users.length > 0) {
            let list = res.result.users;
            if (res.result.title == '部门经理审批') {
              for (let i = 0; i < list.length; i++) {
                let depId = this.depInfo.superiorDepId == '0' ? this.depInfo.id : this.depInfo.superiorDepId
                console.log('depId', depId)
                console.log('depId-', list[i]['departIds'])
                if (depId == list[i]['departIds']) {
                  this.assigneeList.push(list[i])
                }
              }
            } else {
              this.assigneeList = list
            }
            // 默认勾选
            // let ids = [];
            // res.result.users.forEach(e => {
            //   ids.push(e.username);
            // });
            this.form.assignees =  this.assigneeList[0]['username']
          }
        }
      });
    },
  }
}
</script>

<style scoped lang="less">
.img_upload_wrapper {
  list-style:none;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
li {
  position: relative;
  width: 104px;
  height: 104px;
  background: #FFFFFF;
  border-radius: 4px;
  border: 1px solid #E2E7F2;
  overflow: hidden;
  margin-right: 10px;
img {
  width: 88px;
  height: 88px;
  margin-left: 8px;
  margin-top: 8px;
}
i {
  position: absolute;
  right: 5px;
  top: 5px;
}
}
}
</style>
